<template>
  <div>
    <el-dialog :title="dialogInfo?.isAdd ? '添加菜单' : '编辑菜单'" :model-value="dialogInfo?.isShow" center @close="cancel">
      <el-form :model="menuForm" :rules="rules" ref="formRef">
        <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
          <el-input v-model="menuForm.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="上级菜单" prop="pid" :label-width="formLabelWidth">
          <el-select v-model="menuForm.pid" placeholder="Select">
            <el-option label="顶级菜单" :value="0" />
            <el-option 
              v-for="item in store.getters['menu/getMenuList']"
              :key="item.id" 
              :label="item.title" 
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio-group v-model="menuForm.type">
            <el-radio disabled v-model="menuForm.type" :label='1' >目录</el-radio>
            <el-radio disabled v-model="menuForm.type" :label='2' >菜单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth" v-if="menuForm.type">
          <!-- <el-input autocomplete="off" v-model="menuForm.icon" /> -->
          <el-select v-model="menuForm.icon" placeholder="请选择">
            <el-option 
              v-for="item in iconlist"
              :key="item" 
              :label="item" 
              :value="item" >
              <el-icon>
                <component :is="item"></component>
              </el-icon></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单地址" :label-width="formLabelWidth">
          <!-- <el-input autocomplete="off" v-model="menuForm.url" /> -->
          <el-select v-model="menuForm.url" placeholder="请选择">
            <el-option 
              v-for="item in router"
              :key="item.path" 
              :label="item.meta?.title" 
              :value="item.path" >
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch v-model="menuForm.status" 
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
            :active-value="1"
            :inactive-value="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, reactive,defineEmits,defineExpose } from 'vue';
import { ElMessage, FormInstance, FormRules } from "element-plus";
import {menuAdd,menuInfo,menuEdit} from '../../request/api'
import { useStore } from 'vuex';
import {routerIndex} from '../../router'
let store = useStore()
let props = defineProps({
  dialogInfo: Object,
})
let emit = defineEmits(['cancel'])
let formLabelWidth = ref("120px");
let formRef = ref<FormInstance>();
let menuForm = ref({
  pid: 0, //上级分类编号  注意：顶级菜单-0 number
  title: "", //菜单名称string
  icon: "", //图标string
  type: 1, //类型 1目录2菜单number
  url: "", //菜单地址string
  status: 1, //状态   1正常2禁用   number类型number
});
let rules = reactive<FormRules>({
  title: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
    { min: 3, max: 11, message: '长度 3 到 11 ', trigger: 'blur' },
  ],
  pid: [
    {
      required: true,
      message: '请选择上级菜单',
      trigger: 'change',
    },
  ]
});
let iconlist = ['Link','CirclePlus','Star','CircleCheck','Operation','StarFilled','IceCream'];
let router = routerIndex;
let reset = () => {
  menuForm.value = reactive({
    pid: 0, //上级分类编号  注意：顶级菜单-0 number
    title: "", //菜单名称string
    icon: "", //图标string
    type: 1, //类型 1目录2菜单number
    url: "", //菜单地址string
    status: 1, //状态   1正常2禁用   number类型number
  })
  formRef.value?.resetFields()
};
let cancel=()=>{
  emit('cancel',false);
  reset();
};
let lookup = (id:number)=>{
  menuInfo({id}).then((res:any)=>{
    if (res.data.code == 200) {
      menuForm.value = res.data.list;
      menuForm.value.id = id
    } else {
      ElMessage.error(res.data.msg)
    }
  })
};
let confirm=()=>{
  formRef.value?.validate((val)=>{
    if (val) {
      // console.log(menuForm);
      if (props.dialogInfo?.isAdd) {
        menuAdd(menuForm.value).then((res:any)=>{
          // console.log(res);
          if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
            cancel()
            //重新调用接口
            store.dispatch('menu/ChangeMenuAction')
          } else {
            ElMessage.error(res.data.msg)
          }
        })
      }else{
        //调用编辑接口
        menuEdit(menuForm.value).then((res:any)=>{
          if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
            cancel()
            //重新调用接口
            store.dispatch('menu/ChangeMenuAction')
          } else {
            ElMessage.error(res.data.msg)
          }
        })
      }
    }
  })
};
//导出ref需要的函数或属性
defineExpose({
  lookup
})
</script>

<style scoped></style>